/**
 * 工时统计信息显示组件
 */

'use client';

import React from 'react';
import {
  Card,
  Row,
  Col,
  Statistic,
  Typography,
  Space,
  Tag,
  Divider,
  Empty,
} from 'antd';
import {
  ClockCircleOutlined,
  ProjectOutlined,
  UserOutlined,
  TagOutlined,
} from '@ant-design/icons';
import type { WorkloadStatistics } from '../hooks/useWorkloads';
import type { WorkloadQueryParams } from '../types/workload';

const { Title, Text } = Typography;

interface WorkloadStatisticsProps {
  statistics: WorkloadStatistics;
  queryParams?: WorkloadQueryParams;
  loading?: boolean;
}

export default function WorkloadStatisticsComponent({
  statistics,
  queryParams,
  loading = false,
}: WorkloadStatisticsProps) {
  const { totalDuration, projectStats, userStats, typeStats } = statistics;

  // 根据查询条件判断显示哪些统计信息
  const showProjectStats = queryParams?.pilot_id && projectStats.length > 0;
  const showUserStats = queryParams?.report_by_id && userStats.length > 0;
  const showTypeStats = typeStats.length > 0;

  if (loading) {
    return (
      <Card title="工时统计" size="small" loading={true}>
        <div style={{ height: 100 }} />
      </Card>
    );
  }

  if (totalDuration === 0) {
    return (
      <Card title="工时统计" size="small">
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description="暂无工时数据"
          style={{ margin: '20px 0' }}
        />
      </Card>
    );
  }

  return (
    <Card
      title={
        <Space>
          <ClockCircleOutlined style={{ color: '#1890ff' }} />
          <span>工时统计</span>
        </Space>
      }
      size="small"
      styles={{ body: { paddingTop: 16, paddingBottom: 16 } }}
    >
      <Row gutter={[16, 16]}>
        {/* 总工时 */}
        <Col xs={24} sm={12} md={6}>
          <Statistic
            title="总工时"
            value={totalDuration}
            suffix="小时"
            valueStyle={{ color: '#1890ff', fontSize: '24px', fontWeight: 'bold' }}
            prefix={<ClockCircleOutlined />}
          />
        </Col>

        {/* 项目统计 - 仅在选择了项目时显示 */}
        {showProjectStats && (
          <Col xs={24} sm={12} md={6}>
            <div>
              <Text type="secondary" style={{ fontSize: '14px' }}>
                <ProjectOutlined style={{ marginRight: 4 }} />
                项目工时
              </Text>
              <div style={{ marginTop: 8 }}>
                {projectStats.slice(0, 3).map((project, index) => (
                  <div key={project.projectId} style={{ marginBottom: 4 }}>
                    <Space size="small">
                      <Tag color="blue" style={{ margin: 0 }}>
                        {project.totalDuration}h
                      </Tag>
                      <Text
                        style={{
                          fontSize: '12px',
                          maxWidth: '120px',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap',
                          display: 'inline-block',
                        }}
                        title={project.projectName}
                      >
                        {project.projectName}
                      </Text>
                    </Space>
                  </div>
                ))}
                {projectStats.length > 3 && (
                  <Text type="secondary" style={{ fontSize: '12px' }}>
                    还有 {projectStats.length - 3} 个项目...
                  </Text>
                )}
              </div>
            </div>
          </Col>
        )}

        {/* 登记人统计 - 仅在选择了登记人时显示 */}
        {showUserStats && (
          <Col xs={24} sm={12} md={6}>
            <div>
              <Text type="secondary" style={{ fontSize: '14px' }}>
                <UserOutlined style={{ marginRight: 4 }} />
                登记人工时
              </Text>
              <div style={{ marginTop: 8 }}>
                {userStats.slice(0, 3).map((user, index) => (
                  <div key={user.userId} style={{ marginBottom: 4 }}>
                    <Space size="small">
                      <Tag color="green" style={{ margin: 0 }}>
                        {user.totalDuration}h
                      </Tag>
                      <Text
                        style={{
                          fontSize: '12px',
                          maxWidth: '120px',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap',
                          display: 'inline-block',
                        }}
                        title={user.userName}
                      >
                        {user.userName}
                      </Text>
                    </Space>
                  </div>
                ))}
                {userStats.length > 3 && (
                  <Text type="secondary" style={{ fontSize: '12px' }}>
                    还有 {userStats.length - 3} 个登记人...
                  </Text>
                )}
              </div>
            </div>
          </Col>
        )}

        {/* 工时类型统计 */}
        {showTypeStats && (
          <Col xs={24} sm={12} md={6}>
            <div>
              <Text type="secondary" style={{ fontSize: '14px' }}>
                <TagOutlined style={{ marginRight: 4 }} />
                类型分布
              </Text>
              <div style={{ marginTop: 8 }}>
                {typeStats.slice(0, 3).map((type, index) => (
                  <div key={type.typeId} style={{ marginBottom: 4 }}>
                    <Space size="small">
                      <Tag color="orange" style={{ margin: 0 }}>
                        {type.totalDuration}h
                      </Tag>
                      <Text
                        style={{
                          fontSize: '12px',
                          maxWidth: '120px',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap',
                          display: 'inline-block',
                        }}
                        title={type.typeName}
                      >
                        {type.typeName}
                      </Text>
                    </Space>
                  </div>
                ))}
                {typeStats.length > 3 && (
                  <Text type="secondary" style={{ fontSize: '12px' }}>
                    还有 {typeStats.length - 3} 个类型...
                  </Text>
                )}
              </div>
            </div>
          </Col>
        )}
      </Row>

      {/* 详细统计信息 - 当没有特定查询条件时显示概览 */}
      {!showProjectStats && !showUserStats && (projectStats.length > 0 || userStats.length > 0) && (
        <>
          <Divider style={{ margin: '16px 0' }} />
          <Row gutter={[16, 8]}>
            {/* 项目概览 */}
            {projectStats.length > 0 && (
              <Col xs={24} md={12}>
                <div>
                  <Title level={5} style={{ margin: '0 0 8px 0', fontSize: '14px' }}>
                    <ProjectOutlined style={{ marginRight: 4, color: '#1890ff' }} />
                    项目工时分布 (前5名)
                  </Title>
                  <div style={{ maxHeight: '120px', overflowY: 'auto' }}>
                    {projectStats.slice(0, 5).map((project, index) => (
                      <div
                        key={project.projectId}
                        style={{
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                          padding: '4px 0',
                          borderBottom: index < Math.min(4, projectStats.length - 1) ? '1px solid #f0f0f0' : 'none',
                        }}
                      >
                        <Text
                          style={{
                            fontSize: '12px',
                            flex: 1,
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            marginRight: 8,
                          }}
                          title={project.projectName}
                        >
                          {project.projectName}
                        </Text>
                        <Tag color="blue" style={{ margin: 0, fontSize: '11px' }}>
                          {project.totalDuration}h
                        </Tag>
                      </div>
                    ))}
                  </div>
                </div>
              </Col>
            )}

            {/* 登记人概览 */}
            {userStats.length > 0 && (
              <Col xs={24} md={12}>
                <div>
                  <Title level={5} style={{ margin: '0 0 8px 0', fontSize: '14px' }}>
                    <UserOutlined style={{ marginRight: 4, color: '#52c41a' }} />
                    登记人工时分布 (前5名)
                  </Title>
                  <div style={{ maxHeight: '120px', overflowY: 'auto' }}>
                    {userStats.slice(0, 5).map((user, index) => (
                      <div
                        key={user.userId}
                        style={{
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                          padding: '4px 0',
                          borderBottom: index < Math.min(4, userStats.length - 1) ? '1px solid #f0f0f0' : 'none',
                        }}
                      >
                        <Text
                          style={{
                            fontSize: '12px',
                            flex: 1,
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            marginRight: 8,
                          }}
                          title={user.userName}
                        >
                          {user.userName}
                        </Text>
                        <Tag color="green" style={{ margin: 0, fontSize: '11px' }}>
                          {user.totalDuration}h
                        </Tag>
                      </div>
                    ))}
                  </div>
                </div>
              </Col>
            )}
          </Row>
        </>
      )}
    </Card>
  );
}